<template>
  <div class="box">
    <div class="container" v-html="info.content"></div>
    <!-- <div v-if="codeUrl" class="code-container">
      <img :src="codeUrl" alt="" />
    </div> -->
    <div class="user-card" v-if='userId'>
      <div class="top">
        <div class="left">
          <div class="name">{{ userInfo.name || "-" }}</div>
          <div class="rank">{{ userInfo.fortuneIdea || "-" }}</div>
        </div>
        <div class="avatar">
          <img :src="userInfo.headImgUrl || avatarImg" alt="" />
        </div>
      </div>
      <div class="desc">
        {{userInfo.fortuneExperience||'-'}}
      </div>
      <div class="btn-container">
        <div class="item" @click="callPhone()">
          <van-icon size="20px" color="#fe3d23" name="phone" />
          <span>打电话</span>
        </div>
        <div class="item" @click="showPop = true">
          <van-icon size="20px" color="#43b529" name="wechat" />
          <span>加微信</span>
        </div>
        <div class="item" @click="$router.push('/topProduct')">
          <van-icon size="20px" color="#dab374" name="thumb-circle" />
          <span>精选项目</span>
        </div>
        <div class="item" @click="$router.push('/videoList')">
          <van-icon size="20px" color="#839aff" name="video" />
          <span>金融学堂</span>
        </div>
      </div>
    </div>
    <van-popup v-model="showPop" style="width:80%">
      <div class="code-container">
        <img :src="userInfo.wxWorkQrcode" alt="" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getDetail } from "@/api/product";
import { initShare } from "@/utils/wx-share";
import * as userApi from "@/api/userInfo";
import avatarImg from "@/assets/images/my/avatar.png";

export default {
  data() {
    return {
      info: {},
      userInfo: {},
      codeUrl: "",
      avatarImg,
      showPop: false,
      userId:''
    };
  },
  beforeCreate() {
    // 添加背景色
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#ffffff");
  },
  beforeDestroy() {
    document.querySelector("body").setAttribute("style", "");
  },
  async created() {
    let { id } = this.$route.params;
    let { userId } = this.$route.query;
    await this.showWxWorkCode(userId);
    let info = await getDetail({ id });
    if (!this.$_.isEmpty(info)) {
      this.info = info;
      initShare(
        "中青嘉信财富",
        info.name,
        info.coverUrl,
        this.$getUserInfo().id
      );
    }
  },
  async mounted() {},
  methods: {
    async showWxWorkCode(userId) {
      if (!userId) return;
      const { getDetail } = userApi;
      this.userId=userId
      let info = await getDetail({ id: userId });
      if (info) {
        this.codeUrl = info.wxWorkQrcode;
        this.userInfo = info;
      }
    },
    callPhone() {
      if (this.userInfo.phone) {
        location.href = `tel:${this.userInfo.phone}`;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #fff;
  padding: 0 10px;
}
::v-deep img {
  width: 100%;
  object-fit: contain;
}
::v-deep a {
  word-break: break-all;
}
.box {
  padding: 0 0 20px;
}
.code-container {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.user-card {
  background: #fff;
  margin: 20px;
  padding: 10px 10px 20px;
  box-shadow: darkgrey 1px 1px 15px 1px;
  border-radius: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      .name {
        font-size: 16px;
      }
      .rank {
        font-size: 14px;
        margin-top: 10px;
      }
    }
    .avatar {
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .desc {
    color: #888;
    font-size: 14px;
    margin: 10px 0;
  }
  .btn-container {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    .item {
      width: 40%;
      margin-left: 20px;
      border-radius: 10px;
      border: 1px solid #ddd;
      margin-top: 10px;
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
      span {
        margin-left: 5px;
      }
    }
  }
}
</style>
